<template>
  <div class="treatInfo">
    <div class="header" style="font-size: 18px">
      <div class="line"></div>
      签约详情
      <div class="ellipse">
        <img
          src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1604.png"
          alt="" />
        <img
          src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1604.png"
          alt="" />
        <div class="text" v-if="treatInfo.status == 0" style="border: 1px solid #28d094; color: #28d094">
          待 审 核
        </div>
        <div class="text" v-if="treatInfo.status == 1" style="border: 1px solid #fddb78; color: #fddb78">
          待 支 付
        </div>
        <div class="text" v-if="treatInfo.status == 2" style="border: 1px solid #fa746b; color: #fa746b">
          已 驳 回
        </div>
        <div class="text" v-if="treatInfo.status == 3" style="border: 1px solid #3d4cd4; color: #3d4cd4">
          生 效 中
        </div>
        <div class="text" v-if="treatInfo.status == 4" style="border: 1px solid #9fd43d; color: #9fd43d">
          已 过 期
        </div>
      </div>
    </div>
    <div class="line2"></div>
    <div class="content">
      <el-descriptions title="居民信息" :column="4">
        <el-descriptions-item label="姓名">{{
          treatInfo.resident.name
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{
          treatInfo.resident.IDCard
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          treatInfo.resident.gender === 1 ? "女" : "男"
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{
            new Date().getFullYear() -
            Number(treatInfo.resident.birthday.slice(0, 4))
          }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          treatInfo.resident.tel
        }}</el-descriptions-item>
        <el-descriptions-item label="现居地">{{
          treatInfo.resident.address
        }}</el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item label="居民标签"><el-tag type="info" v-for="(item, index) in treatInfo.labelArr" :key="index">{{
          item.name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="家庭成员">
          <template style="display: flex; margin-left: 70px; margin-top: -40px">
            <el-card shadow="hover">
              <template style="display: flex; justify-content: space-between">
                <img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1575.jpg"
                  alt="" />
                <div class="info">
                  <p>
                    <span>{{ emergency.emergencyContact }}</span>
                  </p>
                  <p>{{ emergency.emergencyNumber }}</p>
                </div>
                <img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1576.png"
                  alt="" />
              </template>
            </el-card>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <div class="line2"></div>
      <el-descriptions title="签约信息" :column="4">
        <el-descriptions-item label="签约编号">{{
          treatInfo.number
        }}</el-descriptions-item>
        <el-descriptions-item label="签约状态"><template v-if="treatInfo.status == 0">
            <span style="color: #3dd4a7">待审核</span>
          </template>
          <template v-if="treatInfo.status == 1"><span style="color: #fddb78"> 审核通过，等待用户支付</span>
          </template>
          <template v-if="treatInfo.status == 2"><span style="color: #fa746b">已驳回，等待居民修改</span></template>
          <template v-if="treatInfo.status == 3"><span style="color: #3d4cd4">生效中</span>
          </template>
          <template v-if="treatInfo.status == 4"><span style="color: #9fd43d">已过期</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="签约机构">{{
          treatInfo.organ.name
        }}</el-descriptions-item>
        <el-descriptions-item label="签约团队">{{
          treatInfo.team.name
        }}</el-descriptions-item>
        <el-descriptions-item label="签约医生">{{
          treatInfo.organ.name
        }}</el-descriptions-item>
        <el-descriptions-item label="服务包">{{
          treatInfo.service.name
        }}</el-descriptions-item>
        <el-descriptions-item label="签约周期">{{ treatInfo.service.period }}年</el-descriptions-item>
        <el-descriptions-item label="费用">￥{{ treatInfo.service.price }}</el-descriptions-item>
        <el-descriptions-item label="签约类型">{{
          treatInfo.type
        }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{
          treatInfo.subscribeTime
        }}</el-descriptions-item>
        <el-descriptions-item label="生效日期">{{
          treatInfo.takingEffectTime
        }}</el-descriptions-item>
        <template v-if="treatInfo.status" !="0">
          <el-descriptions-item label="到期时间" v-if="treatInfo.status == 3">{{
            Number(treatInfo.takingEffectTime.slice(0, 4)) +
            treatInfo.service.period +
            treatInfo.takingEffectTime.slice(4)
          }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{
            treatInfo.doctor.name
          }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{
            treatInfo.notes
          }}</el-descriptions-item>

          <template v-if="treatInfo.status == 3">
            <el-descriptions-item label="支付时间">{{
              treatInfo.notes
            }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{
              treatInfo.notes
            }}</el-descriptions-item>
          </template>
        </template>
        <el-descriptions-item v-if="treatInfo.status == 0"></el-descriptions-item>
        <el-descriptions-item label="驳回原因" v-if="treatInfo.status == 2">{{
          treatInfo.notes
        }}</el-descriptions-item>
        <el-descriptions-item label="签约备注">{{
          treatInfo.notes
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="line2"></div>
      <template v-if="treatInfo.status != 2">
        <el-button type="primary" size="large" @click="modify" v-if="treatInfo.status != 3">编辑签约信息</el-button>
        <el-button type="primary" size="large" @click="XY" v-if="treatInfo.status == 3">续约</el-button>
        <el-button type="warning" size="large" @click="TXZF" v-if="treatInfo.status == 1">提醒支付</el-button>
        <template v-if="treatInfo.status == 0">
          <el-button type="success" size="large" @click="pass">审核通过</el-button>
          <el-button type="danger" size="large" @click="out">驳回</el-button>
        </template>
      </template>
      <el-button size="large" @click="Return">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import api from "@/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
//当前信息
const treatInfo = ref({
  doctor: { id: "67e98bc0-ee1b-11ed-8459-c76f227cacf8", name: "段宏" },
  doctorId: "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  flag: 0,
  id: "88579930-ee50-11ed-8059-0ba99686sd93",
  labelArr: [{ name: "心脏病" }, { name: "阿尔茨海默症" }],
  notes: "无",
  number: "20235121407123",
  organ: {
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    name: "成都市武侯区望江路社区卫生服务中心",
  },
  organId: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  resident: {
    id: "67e98bc0-ee1b-11ed-8459-ab11227ca877",
    name: "白素贞",
    IDCard: "511283199102162738",
    gender: 1,
    birthday: "1991-02-16",
    tel: "18844449999",
    address: "四川省成都市都江堰青城山",
  },
  residentId: "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  service: {
    id: "8000e240-828b-11ed-a736-b1a95d18c711",
    name: "老人服务包",
    price: 1600,
    period: 1,
  },
  serviceId: "8000e240-828b-11ed-a736-b1a95d18c711",
  status: 3,
  subscribeTime: "2023-05-12 14:06:11",
  takingEffectTime: "2023-05-13 00:00:00",
  team: { id: "88579930-ee50-11ed-8059-0ba99686cabb", name: "段宏团队" },
  teamId: "88579930-ee50-11ed-8059-0ba99686cabb",
  type: "首次签约",
});
//紧急联系人
const emergency = ref({
  emergencyNumber: "",
  emergencyContact: "",
});
//编辑签约信息
const modify = () => {
  router.push({
    path: "/home/Agency/treatModify",
    query: { id: route.query.id },
  });
};
//审核通过
const pass = async () => {
  console.log({ id: route.query.id, status: 1 });
  // let result = await api.Agency.updateStatus({
  //   id: route.query.id,
  //   status: 1,
  // });
  // console.log(result);

  // if (result.data.code === 200) {
  //   router.push("/home/Agency/treat");
  //   ElMessage.success(result.data.msg);
  // } else {
  //   ElMessage.warning(result.data.msg);
  // }
};
//提醒支付
const TXZF = () => {
  ElMessage.success(`提醒成功`);
};
//续约
const XY = async () => {
  ElMessage.warning("暂未开放");
};
//驳回
const out = async () => {
  let result = await api.Agency.updateStatus({
    id: route.query.id,
    status: 2,
  });
  if (result.data.code === 200) {
    router.push("/home/Agency/treat");
    ElMessage.success(result.data.msg);
  } else {
    ElMessage.warning(result.data.msg);
  }
};
//返回
const Return = () => {
  if (treatInfo.value.status != 3 && treatInfo.value.status != 4) {
    router.push("/home/Agency/treat");
  } else {
    router.push("/home/Agency/Recording");
  }
};
//后台获取信息
const getTreatInfo = async () => {
  let result = await api.Agency.getAgencyInfo({ id: route.query.id });
  let result1 = await api.Agency.getResidentLabelHealth(
    result.data.data.resident.id
  );
  treatInfo.value = result.data.data;
  emergency.value.emergencyContact = result1.data.data.emergencyContact;
  emergency.value.emergencyNumber = result1.data.data.emergencyNumber;
};
getTreatInfo();
</script>
<style lang="scss">
.treatInfo {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;

  .header {
    @include flex(none, center, none);

    .line {
      width: 6px;
      height: 20px;
      background-color: skyblue;
      border-radius: 5px;
      margin-right: 10px;
    }

    .ellipse {
      margin-left: 30px;
      position: relative;
      top: -10px;

      img {
        position: absolute;
      }

      img:last-of-type {
        width: 39px;
        height: 39px;
        top: 9px;
        left: 9px;
      }

      .text {
        z-index: 100;
        font-size: 13px;
        width: 64px;
        height: 24px;
        transform: rotate(330deg);
        position: absolute;
        left: -4px;
        top: 16px;
        line-height: 24px;
        text-align: center;
        background-color: white;
        font-weight: bold;
      }
    }
  }

  .line2 {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
  }

  .content {
    .el-descriptions {
      .el-descriptions__body {
        display: flex;
        height: 240px;
      }

      .el-tag {
        height: 32px;
        margin: 0 5px;
      }

      .el-card {
        width: 200px;
        height: 84px;
        box-sizing: border-box;
        margin: 10px;
        color: #999999;

        .info {
          font-size: 12px;

          span {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.829);
            margin-right: 10px;
          }
        }

        img {
          width: 40px;
          height: 40px;
        }

        img:last-of-type {
          width: 10px;
          height: 15px;
          transform: rotate(330deg);
        }
      }

      .el-descriptions__content {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.89);
      }

      .el-descriptions__label {
        color: #999999;
        font-size: 13px;
        width: 60px;
        text-align: right;
        display: inline-block;
      }
    }
  }
}
</style>
